import AddressApi from '../../api/address';
import { useHistory } from "react-router";
import { Input, Form, Button, Card, message, Breadcrumb, Space } from 'antd';
import { useAddress } from '../../hook/address';

//eslint-disable-next-line
export default () => {
    const [{ searchAddr }] = useAddress();
    const { Search } = Input;
    const history = useHistory();

    const onFinish = async ({ name, address, phone, Open_hours, longitude, latitude, poster, imgs }) => {
        const status = await AddressApi.add({ name, address, phone, Open_hours, longitude, latitude, poster, imgs })
        if (status) {
            message.success("添加完成,请上传照片...", 1, () => {
                history.push(`/info/address_picture/${status._id}`)
            });
        }
    };

    const onSearch = async (value) => {
        // 向状态机发送请求
        await searchAddr({ name: value })
    };

    return (
        <div style={{ margin: "30px" }}>
            <Card>
                <Breadcrumb style={{ marginBottom: '15px' }}>
                    <Breadcrumb.Item>自提点</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="http://localhost:3000/#/info/address" >自提点列表</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="http://localhost:3000/#/info/address">查询自提点</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="http://localhost:3000/#/info/address_add">新增自提点</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
                <Space>
                    <span>查询地址</span>
                    <Search placeholder="输入搜索内容" onSearch={onSearch} enterButton style={{ width: '200px' }} />
                </Space>
            </Card>
            <Card bordered={true} title="新增自提点" >
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    onFinish={onFinish}
                    initialValues={{ remember: true }}
                    autoComplete="off"
                    style={{ width: '500px' }}
                >
                    <Form.Item
                        label="驿站名称"
                        name="name"
                        rules={[{ required: true, message: '必填项' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="驿站地址"
                        name="address"
                        rules={[{ required: true, message: '必填项' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item label="手机号码" name="phone" rules={[{ required: true, message: '必填项' }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="营业时间"
                        name="Open_hours"
                        rules={[{ required: true, message: '必填项' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="经度"
                        name="longitude"
                        rules={[{ required: true, message: '必填项' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="纬度"
                        name="latitude"
                        rules={[{ required: true, message: '必填项' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit" > 新增提货点</Button>
                    </Form.Item>
                </Form>
            </Card>

        </div >)
}